<html>
  <head>
  <title>Simple Map</title>
  <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
  <meta charset='utf-8'> 
  <style> html, body, #map-canvas {height: 1px; margin: 0px; padding: 0px } </style>
  <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
  <script>
    var map;
    var pins = new Array();
    var currPosition = 0;
    var userPin;

    function initialize() {
      var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
      document.getElementById('map-canvas').style.height = height;

      var mapOptions = { zoom: 3, center: new google.maps.LatLng(-13.068777,-48.654786) };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      console.log("INITIALIZE");

      if(navigator.geolocation) {
          console.log("GEOLOCATION = TRUE");
          navigator.geolocation.getCurrentPosition(
            function(position) {
              console.log("CURR POS: "+position);
            },
            function() {
              console.log("CUR POS ERROR!!!");
            }
          );
      } else {
          console.log("GEOLOCATION = FALSE");
      }

      navigator.geolocation.watchPosition(
        function(pos) {
          console.log("NEW POS!!");
          var crd = pos.coords;
          moveTo(crd);

          reqBack("newPos:"+crd.latitude+","+crd.longitude);
        }
      );

    }

    function pinSymbol(color) {
      return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: '#'+color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
      };
    }

/*
    function pinSymbol(color) {
      return 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2%7C'+color+'%7C000000';
    }
*/
    function moveTo(crd) {
      if(currPosition==0) {
        userPin = addPin(0,crd.latitude,crd.longitude,"FF0000","");
      } else {
        userPin.position = new google.maps.LatLng(crd.latitude,crd.longitude);
      }
      currPosition = crd;

      map.setCenter(new google.maps.LatLng(crd.latitude,crd.longitude));
    }

    function addPin(pinId,lat,lon,color,titleText) {
      var mapMarker = new google.maps.Marker({
        icon: pinSymbol(color),
        position: new google.maps.LatLng(lat,lon),
        map: map,
        title: titleText
      });

      pins[pins.length] = {id: pinId, marker: mapMarker};

      google.maps.event.addListener(mapMarker, 'click', function() {
        map.setCenter(mapMarker.getPosition());
        reqBack("markerClicked:"+pinId);
      });

      return mapMarker;
    }

    function reqBack(msg) {
      xmlhttp=new XMLHttpRequest();
      xmlhttp.open('GET','http://localhost:8081/'+btoa(msg),false);
      xmlhttp.send();
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id='map-canvas'></div>
  </body>
</html>
